<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员页面</title>
  <!-- 这是管理员页面 -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/pet.css">
  <link rel="stylesheet" href="fonts/iconfont.css">
  <script src="js/vue.js"></script>
  <script src="js/cdn.axios.js"></script>

</head>
<body>
<div id="root">
  <!-- 导航栏部分 -->
  <div class="nav">
    <h1 class="left">宠物管理系统</h1>
    <div class="right">
      <span class="user">欢迎管理员登录</span>
      <span><a href="index.html">登出</a></span>
    </div>
  </div>

  <!-- 内容部分 -->
  <div class="container">
    <!-- 左侧下拉菜单 -->
    <div class="leftnav">
      <div>后台管理</div>
      <ul>
        <li><a href="user.html">用户信息</a></li>
        <li><a href="admin.html">管理员信息</a></li>
        <li><a href="pet.html">宠物管理</a></li>
        <li><a href="adoptmanger.html">领养管理</a></li>
        <li><a href="agree.html">同意领养列表</a></li>
        <li><a href="disagree.html">不同意领养列表</a></li>
      </ul>
    </div>

    <!-- 右侧表单 -->
    <div class="rightform">
      <div class="form">
        <h1>管理员管理</h1>
        <div class="ipt">
          <span>管理员名称</span>
          <span class="search">
                        <input type="text" name="" id="" v-model="nickname">
                        <button class="iconfont btn" @click="searchByAdminName">&#xe605;</button>
                    </span>
<!--          <button class="toggleModal add" @click="showInsert">新增</button>-->
              <button class="toggleModal add" @click="reset">重置</button>
        </div>
        <table class="table">
          <!-- 标题 -->
          <caption>管理员信息列表</caption>
          <thead>
          <tr>
            <th>编号</th>
            <th>管理员名称</th>
            <th>真实姓名</th>
            <th>电话</th>
            <th>Email</th>
            <th>性别</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="admin in admins">
            <td>{{admin.id}}</td>
            <td>{{admin.nickName}}</td>
            <td>{{admin.realName}}</td>
            <td>{{admin.phoneNum}}</td>
            <td>{{admin.email}}</td>
            <td>{{admin.gender}}</td>
          </tr>
          </tbody>
        </table>

        <!-- 分页功能 -->
        <div class="page">
          <div class="leftPage">
            当前第<span>{{curPage}}</span>页
            共<span>{{totalPage}}</span>页
            <span>{{totalitem}}</span>条记录
          </div>
          <ul class="rightPage">
            <li><span @click="getPage(1)">首页</span></li>
            <li><span @click="getPage(curPage-1)">上一页</span></li>
            <!-- 用于遍历查出来的数据 -->
            <li v-for="index of totalPage"><span @click="getPage(index)">{{index}}</span></li>
            <li><span @click="getPage(curPage+1)">下一页</span></li>
            <li><span @click="getPage(totalPage)">尾页</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  const {createApp} = Vue;
  createApp({
    data() {
      return {
        admins:new Map(),
        insertShow:false,
        updateShow:false,
        flag:false,
        nickname:'',
        pageSize:3,
        // 总数据数
        totalitem:0,
        // 当前页
        curPage:0,
        // 总页数
        totalPage:0,
      }
    },
    created() {
      this.reload();
    },

    methods: {
      showInsert() {
        this.insertShow = true;
        this.flag = true
      },
      showUpdate() {
        this.updateShow = true;
        this.flag = true;
      },
      close(){
        this.insertShow = false;
        this.updateShow = false
        this.flag = false;
      },

      reset() {
        this.reload();
      },

      reload() {
        const that = this;
        axios({
          method:"get",
          url:"/admin/getall?pageSize="+this.pageSize,
        }).then(function (res) {
          that.admins = res.data.page.pageContentList;
          that.totalitem = res.data.page.totalitem;
          that.curPage = res.data.page.curPage;
          that.totalPage = res.data.page.totalPage;
          console.log(that.totalitem)
          console.log(res.data.page);
        })
      },

      getPage(index) {
        const that = this;
        if(index===0) index=1;
        if(index>=this.totalPage) index=this.totalPage;
        axios({
          method:"get",
          url:"/admin/getpage?index="+index,

        }).then(function (res) {
          that.admins = res.data.page.pageContentList;
          that.curPage = res.data.page.curPage;
        })
      },

      searchByAdminName() {
        const that = this;
        axios({
          method: "get",
          url:"/admin/getbyname?nickname="+that.nickname,
          contentType: 'application/json',
        }).then(function (res) {
          console.log(res.data)
          that.admins = res.data.contentList;
          console.log(res.data.contentList);
        })
      },

    }
  }).mount("#root")
</script>
</body>
</html>